<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  </head>
  
  <body>
    <form>
        <input type="hidden" value="隐藏值">
        <a class="first"></a>
        <a class="second"></a>
        <a class="third"></a>
        <input name="a" type="radio" value="1" checked="checked">1
        <input name="a" type="radio" value="2">2
        <select>
           <optgroup label="下拉组一">
               <option>一</option>
               <option>二</option>
               <option>三</option>
           </optgroup>
           <optgroup label="下拉组二">
               <option>一</option>
               <option>二</option>
               <option selected="selected">三</option>
           </optgroup>
        </select>
    </form>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".first").attr({
                title: "超链接",
                href: "http://www.baidu.com",
                onclick: "return false;"
            })
            .html("百度");
            //.attr("")必须传入具体属性名，否则报错
            console.log($("a").attr("href"));
            
            //伪类选择器
            //取得a中的第一个
            console.log($("a:first").attr("class"));
            //取得所有偶数的a元素，默认从0开始
            console.log($("a:even").length);
            //取得所有索引大于0的
            console.log($("a:gt(0)").length);
            //取得所有以d结尾的
            console.log($("a[class$='d']").length);
            //如果使用:visible和:hidden时
            //jQuery会测试元素的可见性
            //而不是它的css属性
            //jQuery会查看它的高度和宽度是否都大于0
            //tr元素会查看元素的display属性是否设置为none
            //未被dom加载的元素总会被视为隐藏，尽管css会渲染它们的可见性
            
            //使用$().length是判断元素是否存在的
            if (!$("div.tmp").length) {
                console.log("javascript认为0是false");
            }
            
            if ($("A").length) {
                console.log("A元素存在" + $("A").length + "个");
            } else {
                console.log("A元素不存在");
            }
            //a中不包含.first class
            console.log($("a").not(".first").length);
            //a中第二个元素
            console.log($("a").eq(1).attr("class"));
            
            //取得form单选、复选、下拉被选择值
            //需要在页面加载的时候默认被选中，否则需要重新取得来刷新dom状态
            console.log($("form :checked").length);
            //只对select有效
            console.log($("form :selected").length);
        });
    </script>
  </body>
</html>
